/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view class="price-star" @touchmove.prevent>
		<view class="mask" @click="close()"  @touchmove.prevent></view>
		<view class="ps-body">
			<view class="price">
				<text class="price-label">价格区间（元）</text>
				<view class="price-box">
					<input type="number"  v-model="moneyStart" placeholder="设置最低价" />
					<view class="line"></view>
					<input type="number"  v-model="moneyEnd"  placeholder="设置最高价" />
				</view>
			</view>
			<view class="star">
				<text class="price-label">星级</text>
				<view class="price-list">
					<view class="price-item" :class="starIndex==index?'price-item-ac':''" v-for='(item,index) in starData' :key='index' @click="chooseStar(item,index)">
						<text>{{item.star}}</text>
						<text>{{item.type}}</text>
					</view>
				</view>
			</view>
			<view class="commit" @click="commit">完成</view>
		</view>
	</view>
</template>

<script>
	import rangeSlider from '@/components/range-slider/range-slider'
	export default{
		data(){
			return{
				moneyStart:'',
				moneyEnd:'',
				priceIndex:null,
				starIndex:null,
				startText:'',
				starData:[
					{
						star:'二星及以下',
						type:'经济'
					},
					{
						star:'三星',
						type:'舒适'
					},
					{
						star:'四星',
						type:'高档'
					},
					{
						star:'五星',
						type:'豪华'
					}
				]
			}
		},
		methods: {
			chooseStar(obj,index){
				this.starIndex = index
				this.startText = obj.star+'/'+obj.type
			},
			commit(){
				if(this.moneyStart>this.moneyEnd&&this.moneyEnd!=''){
					uni.showToast({
						title: '金额范围错误',
						icon:'none',
						duration: 1000
					});
					return
				}
				if(this.moneyStart==''&&this.moneyEnd!=''){
					this.$store.commit('hotelPriceUpdata','最高￥'+this.moneyEnd+'/')
				}
				if(this.moneyStart!=''&&this.moneyEnd==''){
					this.$store.commit('hotelPriceUpdata','￥'+this.moneyStart+'起/')
				}
				if(this.moneyStart!=''&&this.moneyEnd!=''){
					this.$store.commit('hotelPriceUpdata','￥'+this.moneyStart+'-'+this.moneyEnd+'/')
				}
				if(this.startText != ''){
					this.$store.commit('hotelStarUpdata',this.startText)
				}else{
					this.$store.commit('hotelStarUpdata','')
				}
				
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeHPSArea();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeHPSArea();
				//#endif
				
				// this.$store.state.queryPs = '￥'+this.moneyStart+'-'+this.moneyEnd+'/'+this.startText
			},
			close(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeHPSArea();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeHPSArea();
				//#endif
			}
		},
		created(){
		},
	}
</script>

<style scoped>
	.price-star{
		width: 750upx;
		height: 100vh;
		position: fixed;
		z-index: 30;
		top: 0;
		left: 0;
	}
	.mask{
		width: 750upx;
		height: 100vh;
		position: absolute;
		z-index: 20;
		background: rgba(0,0,0,0.5);
	}
	.ps-body{
		width: 750upx;
		position: absolute;
		border-radius: 30upx 30upx 0 0;
		background: #FFFFFF;
		height: 522upx;
		bottom: 98upx;
		z-index: 40;
		box-shadow:2px -3px 5px rgba(206,206,206,0.75);
		padding-top: 40upx;
	}
	.price{
		width: 750upx;
		height: auto;
		display: table;
	}
	.price-label{
		font-size: 32upx;
		margin-left: 30upx;
		line-height: 60upx;
		float: left;
	}
	.price-box{
		width: 600upx;
		height: 66upx;
		margin-left: 75upx;
		margin-top: 90upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.line{
		width: 50upx;
		height: 2upx;
		background: rgba(153,153,153,1.00);
		margin: 32upx 30upx 0 30upx;
	}
	.price-box input{
		width: 288upx;
		height: 66upx;
		background:rgba(246,246,246,1.00);
		line-height: 66upx;
		text-align: center;
		border-radius: 30upx;
		font-size: 30upx;
		padding: 0 20upx;
	}
	
	.price-list{
		width: 700upx;
		margin-left: 25upx;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.price-item{
		background: #F3F6FB;
		padding: 4upx 20upx;
		margin-right: 10upx;
		font-size: 24upx;
		color: #666666;
		min-width: 120upx;
		height: 70upx;
		border-radius: 10upx;
		text-align: center;
		margin-top: 20upx;
	}
	.price-item-ac{
		color: #5779FE;
		background: #D8E5FA;
		
	}
	.price-item text:first-child{
		width: 100%;
		display: block;
		font-size: 26upx;
		text-align: center;
	}
	.price-item text:last-child{
		display: block;
		width: 100%;
		font-size: 24upx;
		text-align: center;
	}
	.star{
		margin-top: 20upx;
		width: 750upx;
		height: auto;
	}
	.commit{
		width: 600upx;
		height: 80upx;
		border-radius: 20upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		color: #FFFFFF;
		text-align: center;
		line-height: 80upx;
		font-size: 28upx;
		margin-left: 75upx;
		position: absolute;
		bottom: 40upx;
	}
</style>
